<template>
    <div class="ui-dialog show"
        v-show="show">

    </div>
    <div class="ui-dialog-box"
        v-show="show"
        :transition="transitionName">
            <slot name="header"></slot>
            <slot name="body"></slot>
            <slot name="footer"></slot>
        </div>
</template>
<script>
    import "./dialog.scss";
    import jskit from "../../assets/jskit";

    export default {
        props:[
            'show',
            //动画名称，内置升起 rise
            'transitionName'
        ],
        data () {
            return {

            }
        },
        watch:{
            show(newVal){
                /**
                 * translate Style text to Object
                 * @param  {String} styleText
                 */
                let translateStyleObj = function(styleText=''){
                    let styleArray = styleText.toLocaleLowerCase().split(';'),
                        length  = styleArray.length,
                        i = 0,
                        styleObj = {},
                        propVal;
                    for(;i<length;i++){
                        propVal = styleArray[i].split(':');
                        //排除结尾;
                        if(propVal[1]){
                            styleObj[propVal[0]] = propVal[1];
                        }

                    }
                    return styleObj;
                }

                //根据dialog显示设置页面是否能滚动
                let dc = document.documentElement,
                    sourceCssText = dc.dataset['sourceStyle']===undefined ?
                            (dc.dataset['sourceStyle'] = dc.style.cssText) :
                            dc.dataset['sourceStyle'],
                    sourceStyleObj = translateStyleObj(sourceCssText),
                    styleObj = {};

                if(newVal){
                    styleObj = {
                        position:'relative',
                        overflow:'hidden',
                        height:window.innerHeight+'px'
                    }
                }else{
                    styleObj = {
                        position:null,
                        overflow:null,
                        height:null
                    }
                }

                jskit.extends(sourceStyleObj,styleObj);

                let cssText = '',
                    i;
                for(i in sourceStyleObj){
                    if(sourceStyleObj[i]){
                        cssText+=i+':'+sourceStyleObj[i]+';';
                    }
                }

                document.body.style.cssText = cssText;
                dc.style.cssText = cssText;
            }
        }
    }
</script>
<style lang="sass">
    //升起
    // .rise-{
    //     &transition{
    //         .ui-dialog-box{
    //             transition: transform .3s ease;
    //             transform: translate(0,0);
    //         }
    //     }
    //     &enter{
    //         .ui-dialog-box{
    //             transform: translate(0,100%);
    //         }
    //     }
    //     &leave{
    //         .ui-dialog-box{
    //             transform: translate(0,0);
    //          }
    //     }

    // }

    .rise-transition {
    }
    .rise-enter {
        animation: riseIn .3s;
    }
    .rise-leave {
        animation: riseOut .3s;
    }
@keyframes riseIn {
  from {
    transform: translate(0,100%);
  }
  to {
    transform: translate(0,0);
  }
}
@keyframes riseOut {
  from {
    transform: translate(0,0);
  }
  to {
    transform: translate(0,100%);
  }
}
</style>
